<template>
    <div class="wenHua">
        <div class="start">
            <h2 class="title">企业文化</h2>
            <p class="jieshi">珠联璧合，互利共赢</p>
            <div class="ul_one">
                <ul class="one" >
                    <li v-for="(item,index) in content" :key="index" >
                        <img :src="item.imgUrl" alt="">
                        <div class="text">
                            <h3 class="text_title">{{item.title}}</h3>
                            <p class="text_main">{{item.text}}</p>
                            <p class="text_ci">{{item.text_1}}</p>
                        </div>
                    </li>
                </ul>
            </div>
            <ul class="two">
                <li @mouseover="mouseDisplacement(1,$event.currentTarget)" @mouseout="mouserOut(1,$event.currentTarget)"></li>
                <li @mouseover="mouseDisplacement(2,$event.currentTarget)" @mouseout="mouserOut(2,$event.currentTarget)"></li>
                <li @mouseover="mouseDisplacement(3,$event.currentTarget)" @mouseout="mouserOut(3,$event.currentTarget)"></li>
                <li @mouseover="mouseDisplacement(4,$event.currentTarget)" @mouseout="mouserOut(4,$event.currentTarget)"></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "wenHua",
        data(){
            return{
                content:[
                    {
                        imgUrl:require('../../assets/c1.png'),
                        title:'核心精神',
                        text:'共创 共赢 共知 共享 与广大企业无私共享，坚定共创事业，真心诚意地为企业服务，实现共赢',
                        text_1:'国内领先的P2P平台，行业第一'
                    },
                    {
                        imgUrl:require('../../assets/c2.jpg'),
                        title:'服务理念',
                        text:'当合作项目顺利完成后，对合作企业有三种选择方式：该项目的技术研发人员可由公司全部带走。',
                        text_1:'农业部农村信息入户工程指定'
                    },
                    {
                        imgUrl:require('../../assets/c3.png'),
                        title:'共创模式',
                        text:'共创 共赢 共知 共享 与广大企业无私共享，坚定共创事业，真心诚意地为企业服务，实现共赢',
                        text_1: '国内最顶级军事院校之一'
                    },
                    {
                        imgUrl:require('../../assets/c4.jpg'),
                        title:'核心精神',
                        text:'共创 共赢 共知 共享 与广大企业无私共享，坚定共创事业，真心诚意地为企业服务，实现共赢',
                        text_1: '湖南最具影响力的媒体之一'
                    },
                ],
                left:'0',
                id:'',
                event:''

            }
        },

        methods:{
            mouseDisplacement(id,event){
                // event.style.background='#0595C7';
                var li_one=document.querySelectorAll('.one li');
                var li_two=document.querySelectorAll('.two li');
                for(var i=0;i<li_one.length;i++){
                    if(i+1===id){
                        li_one[id-1].style.display='block';
                        li_two[id-1].style.background='#0595C7';
                        continue;
                    }
                    li_one[i].style.display='none';
                    li_two[i].style.background='none';
                }
            },
            mouserOut(){

            }

        }
    }
</script>

<style lang="less" scoped>
    .wenHua{
        width: 100%;
        height: 700px;
        min-width: 1300px;
        box-sizing: border-box;
        padding: 150px 300px;
        .start{
            width: 100%;
            .title{
                text-align: center;
                font-size: 30px;
                font-weight: 400;
                margin-bottom: 15px;
            }
            .jieshi{
                text-align: center;
                color: #aaaaaa;
                font-size: 15px;
                font-weight: 400;
                margin-top: 0;
            }
            .ul_one{
                overflow: hidden;
                width: 100%;
                height: 140px;
            }
            .one{
                height: 140px;
                width: 900px;
                /*overflow: hidden;*/
                position: relative;
                li{
                    float: left;
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: none;
                    animation: disp 1.7s;
                    &:last-child{
                        img{
                            transform: scale(.8);
                            border-radius: 50%;
                            margin-right: 7px;
                        }
                    }
                    &:first-child{
                        display: block;
                    }
                    img{
                        float: left;
                        width: 130px;
                        height: 130px;
                    }
                    .text{
                        float: left;
                        height: 140px;
                        text-align: left;
                        .text_title{
                            font-weight: 400;
                        }
                        .text_main,.text_ci{
                            color: #aaaaaa;
                            font-size: 15px;
                        }
                    }
                }
            }
            .two{
                /*width: 100%;*/
                /*margin: 0 auto;*/
                overflow: auto;
                box-sizing: border-box;
                padding: 0 400px;
                margin-top: 70px;
                li{
                    float: left;
                    width: 8px;
                    height: 8px;
                    border: 1px solid #0595C7;
                    border-radius: 50%;
                    margin-left: 15px;
                    &:first-child{
                        background: #0595C7;
                    }
                }
            }
        }
    }
    @keyframes disp {
        0%{opacity: 0}
        100%{opacity: 1}
    }
</style>
